<template>
	<div class="articleHome">
		<navigationTar />
		<div class="shs_body">
			<template v-if="flag">
				<div class="articleHome_item">
					<!-- 封面 -->
					<el-image style="width:100%;height:300px" :src="article.cover" @error="article_cover_err" />
					<!-- 发布时间 -->
					<div class="content_createAt">
						发布于：{{ shs_getdate(article?.createAt) }} ·
						最后更新时间：{{ shs_getdate(article?.updatetime) }} · 阅读量 {{ article?.viewCount }}
					</div>
					<!-- 大标题 -->
					<h1 class="title">{{ article.title }}</h1>
					<!-- 内容 富文本编辑器-->
					<div class="content">
						<template v-if="article.content != '<p><br></p>'">
							<div style="border: 1px solid #ccc">
								<Editor style="height: auto; overflow-y: hidden" v-model="content" :mode="mode"
									@onCreated="onCreated" />
							</div>
						</template>
						<template v-else>
							<el-skeleton />
						</template>
					</div>
					<!-- 工具栏 文章类 标签 点赞 踩 -->
					<wz-toolbar :shsarticle="article" />
				</div>
			</template>
			<template v-else />
			<el-backtop visibility-height:400 style="right:80px;bottom:150px">
				<i class="el-icon-caret-top" />
			</el-backtop>
		</div>
	</div>
</template>

<script>
	import {
		Editor
	} from '@wangeditor/editor-for-vue'
	import '@wangeditor/editor/dist/css/style.css'
	import {
		updata_Article_like_unlike_view
	} from '@/request/api'
	import {
		updata_Article_viewcount
	} from '@/request/api'
	import {
		getArticle_id
	} from '@/request/api'
	import {
		getTags
	} from '@/request/api'

	export default {
		name: 'articleHome',
		props: {
			article_all: {}
		},
		data() {
			return {
				flag: false,
				article: null,
				tag_items: {},
				check_tagitem: null,
				is_like: false,
				is_unlike: false,
				viewCount: 0,
				likeCount: 0,
				unlikeCount: 0,
				timer: null,
				content: null,
				editor: null,
				mode: 'default'
			}
		},
		methods: {
			updata_Article_like_unlike_vie() {
				this.article.likeCount = this.likeCount
				this.article.unlikeCount = this.unlikeCount
				updata_Article_like_unlike_view({
						unlikeCount: this.unlikeCount,
						likeCount: this.likeCount,
						articleID: this.article.articleID
					})
					.then(res => console.log(res.data.msg))
					.catch(console.error)
			},
			onCreated(editor) {
				this.editor = Object.seal(editor)
				this.editor.disable()
			},
			onclick_is_like() {
				this.is_like = !this.is_like
				if (this.is_like) {
					this.likeCount++
					if (this.is_unlike) {
						this.unlikeCount--
						this.is_unlike = false
					}
				} else {
					this.likeCount--
				}
				clearTimeout(this.timer)
				this.timer = setTimeout(this.updata_Article_like_unlike_vie, 1200)
			},
			onclick_is_unlike() {
				this.is_unlike = !this.is_unlike
				if (this.is_unlike) {
					this.unlikeCount++
					if (this.is_like) {
						this.likeCount--
						this.is_like = false
					}
				} else {
					this.unlikeCount--
				}
				clearTimeout(this.timer)
				this.timer = setTimeout(this.updata_Article_like_unlike_vie, 1200)
			},
			shs_getdate(d) {
				const date = new Date(d)
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
			},
			article_cover_err(err) {
				console.log(err)
				if (!this.article.cover) {
					this.$set(this.article, 'cover', 'https://shsnum.xyz/image/background.jpg')
				}
			},
			init() {
				getArticle_id({
						articleID: this.articleID
					})
					.then(data => {
						if (data.data.code === 200) {
							this.article = data.data.data[0] || '-1'
							if (this.article === '-1') {
								this.$message({
									message: '该文章不存在--3s后跳转至首页'
								})
								setTimeout(() => this.$router.push('/'), 3000)
								return
							}
							this.viewCount = this.article.viewCount
							this.likeCount = this.article.likeCount
							this.unlikeCount = this.article.unlikeCount
							this.content = this.article.content
							this.flag = true
							return getTags({
								begin_index: 0,
								page_size: 99999
							})
						}
					})
					.then(data => {
						if (data.data.code === 200) {
							this.tag_items = data.data.data.list
							const tag_list_id = this.article.tag_list_id
							this.check_tagitem = []
							if (!tag_list_id) return
							for (const item of this.tag_items) {
								if (tag_list_id.includes(item.tagID.toString())) {
									this.check_tagitem.push(item)
								}
							}
							return updata_Article_viewcount({
								articleID: this.articleID
							})
						}
					})
					.catch(err => {
						console.error('获取文章失败', err)
						this.$message({
							message: '请稍后再试试吧！'
						})
					})
			}
		},
		mounted() {
			if (this.$route?.query) {
				this.articleID = this.$route.query?.ID || ''
				if (
					!this.articleID ||
					this.articleID.toString().length === 0 ||
					this.articleID % 1 !== 0
				) {
					this.$message({
						message: 'ID类型错误--3s后跳转至首页'
					})
					setTimeout(() => this.$router.push('/'), 3000)
					return
				}
				this.init()
			}
		},
		beforeDestroy() {
			this.editor?.destroy()
		},
		watch: {
			'$route'(to, from) {
				if (to.query.ID !== from.query.ID) {
					this.articleID = to.query.ID
					if (
						!this.articleID ||
						this.articleID.toString().length === 0 ||
						this.articleID % 1 !== 0
					) {
						this.$message({
							message: 'ID类型错误--3s后跳转至首页'
						})
						setTimeout(() => this.$router.push('/'), 3000)
						return
					}
					this.init()
				}
			}
		},
		components: {
			navigationTar: () => import('@/components/navigationTar.vue'),
			Editor,
			wzToolbar: () => import('@/components/wztoolbar.vue')
		}
	}
</script>

<style>
	.w-e-text-container .w-e-scroll {
		background: #e0ffff;
	}

	.content div:first-child {
		border: none !important;
	}
</style>

<style scoped>
	.articleHome_item {
		width: 850px;
		margin: 20px auto;
		padding: 15px;
	}

	.title {
		margin: 10px 0;
	}

	.content {
		margin: 10px 0;
	}

	.content_createAt {
		font-size: 14px;
		color: #8590a6;
	}

	.toolbar {
		width: 100%;
		margin: 10px 0;
	}

	.TagClass,
	.TagList {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		margin: 10px 0 5px;
	}

	.ContentItem-actions {
		margin: 10px 0;
		background: #8590a6;
		height: 54px;
		line-height: 54px;
	}
</style>